<template>
  <div class="addtional">
    <div class="report_title">{{ i18n.t('additional_data_1001') }}</div>
    <healthdata-report-item
      v-for="item in pickReportsDetail"
      :key="item.id"
      :reportItem="item"
      :isSavingImg="isSavingImg"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import HealthdataReportItem from './healthdata-report-item/index.vue';
import getMeasureReports, { consts } from '@yolanda-qn/eight-electrodes-report-lib';
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

const { ReportBuilderIdsEnum } = consts;

@Component({ components: { HealthdataReportItem } })
export default class extends Vue {
  @Prop() measureData!: TypedScaleData;
  @Prop({ default: false }) isSavingImg!: boolean;
  @Prop() weight_unit!: consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  pickReportsDetail: Array<Record<string, any>> = [];
  mounted() {
    this.getReportDetail();
  }
  getReportDetail() {
    const pickReportsDetail = getMeasureReports(
      this.measureData,
      {
        ...this.config,
        builderIds: [
          ReportBuilderIdsEnum.Subfat,
          ReportBuilderIdsEnum.BMR,
          ReportBuilderIdsEnum.LBM,
          ReportBuilderIdsEnum.SinewMass,
          ReportBuilderIdsEnum.BodyAge,
          ReportBuilderIdsEnum.FattyLiver,
        ],
      },
    ).map((item) => item.toObject());
    console.log('pickReportsDetail', pickReportsDetail);
    this.pickReportsDetail = pickReportsDetail;
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.addtional {
  background: #fff;
  margin-top: rem(20);
  box-shadow: 0px rem(3) rem(4) 0px rgba(0, 0, 0, 0.03);
  border-radius: rem(16);
  padding: 0 rem(24) rem(24);
}
</style>
